<template>
  <div class="WHeader">
    <div class="header-top-wrap">
      <div class="header-top">
        <ul class="notice">
          <img src="@/assets/header/laba.gif" alt="" />
          <li><a href=""> 因疫情影响，部分地区无法配送公告</a></li>
        </ul>
        <div class="right">
          <a>登录/注册</a>
          <router-link to="/center">我的订单</router-link>
          <a>会员</a>
          <a>甄选家</a>
          <a>企业采购</a>
          <a>客户服务</a>
          <a><i class="iconfont icon-tel"></i> APP</a>
        </div>
      </div>
    </div>
    <div class="header-bottom-wrap">
      <div class="header-bottom">
        <div class="search-wrap">
          <i class="logo"></i>
          <div class="search">
            <div
              class="search-right"
              @click="
                router.push(
                  `/search?keyword=${keyword.trim() ? keyword : '严选会员升级'}`
                )
              "
            >
              <span>搜索</span>
            </div>
            <i class="iconfont icon-sousuo"></i>
            <input
              type="text"
              v-model="keyword"
              placeholder="严选会员升级"
              @keydown.enter="
                router.push(
                  `/search?keyword=${keyword.trim() ? keyword : '严选会员升级'}`
                )
              "
            />
          </div>
          <div class="cart" @click="router.push('/cart')">
            <span
              ><i class="iconfont icon-gouwuche"></i>
              购物车
              <em>0</em></span
            >
          </div>
        </div>
        <div class="tab-hover" @mouseleave="subCates = undefined"></div>
        <div class="tab-wrap">
          <li
            @click="router.push('/')"
            :style="{
              borderBottom: route.path === '/' ? '3px solid #c39657' : '',
            }"
          >
            首页
          </li>
          <li
            v-for="c1 in cateList"
            :key="c1.id"
            @mouseenter="setCateList(c1.id)"
            @click="toList({ categoryId: c1.id })"
            :style="{
              borderBottom:
                route.name == 'WGoodsList' && categoryId == c1.id
                  ? '3px solid #c39657'
                  : '',
            }"
          >
            {{ c1.name }}
          </li>
          <li>为你严选</li>
          <li>众筹</li>
        </div>
      </div>
      <div class="subcate" v-if="subCates" @mouseleave="subCates = undefined">
        <dl v-for="(sc, index) in subCates.subCateGroupList" :key="index">
          <dt>{{ sc.name }}</dt>
          <dd
            v-for="(subc, index) in sc.categoryList"
            @click="
              toList({
                categoryId: subc.superCategoryId,
                subCategoryId: subc.id,
              })
            "
          >
            <img :src="subc.bannerUrl" :alt="subc.frontDesc" />
            <span>{{ subc.name }}</span>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  export default {
    name: "WHeader",
  };
</script>
<script setup lang="ts">
  import { computed, onMounted, ref } from "vue";
  import { useRouter, useRoute } from "vue-router";
  import { useHeaderStore } from "@/stores/modules/header";
  import type { cate } from "@/api/header/interface/index";
  import { toListquery } from "./interface";
  import { storeToRefs } from "pinia";
  const headerStore = useHeaderStore();
  const { getCateList } = headerStore;
  const { cateList } = storeToRefs(headerStore);
  const router = useRouter();
  const route = useRoute();
  const keyword = ref("");
  const subCates = ref<cate>();
  onMounted(() => {
    getCateList();
  });
  const setCateList = (id: number) => {
    subCates.value = cateList.value.filter((cate) => cate.id === id)[0];
  };
  const toList = (ids: toListquery) => {
    if (ids.subCategoryId) {
      router.push({
        name: "WGoodsList",
        query: ids as any,
      });
    } else {
      router.push(`/goodslist?categoryId=${ids.categoryId}`);
    }
  };
  const categoryId = computed(() => {
    return Number(route.query.categoryId);
  });
</script>
<style scoped lang="less">
  .WHeader {
    position: fixed;
    width: 100%;
    top: 0;
    background-color: #fff;
    z-index: 999;
    .header-top-wrap {
      height: 36px;
      box-sizing: border-box;
      background-color: #333333;
      .header-top {
        width: 1090px;
        height: 100%;
        margin: 0 auto;
        a {
          font-size: 12px;
        }
        .notice {
          position: absolute;
          width: 218px;
          padding-left: 22px;
          img {
            position: absolute;
            left: 0px;
            margin-top: 11.5px;
          }
          li {
            height: 36px;
            line-height: 33px;
          }
          a {
            color: #cc9756;
            font-size: 12px;
            text-decoration: underline;
          }
        }
        .right {
          float: right;
          height: 36px;
          line-height: 33px;
          a {
            color: #ccc;
            padding: 0 10px;
            cursor: pointer;
            i {
              font-size: 12px;
            }
            &:not(:last-child) {
              border-right: 1px solid #999;
            }
            &:hover {
              color: #fff;
            }
          }
        }
      }
    }
    .header-bottom-wrap {
      position: relative;
      height: 140px;
      border-bottom: 1px solid #e5e5e5;
      .tab-hover {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 28px;
        height: 20px;
      }
      .header-bottom {
        width: 1090px;
        height: 100%;
        // background-color: black;
        margin: 0 auto;
        .search-wrap {
          position: relative;
          height: 102px;
          .logo {
            display: inline-block;
            width: 212px;
            height: 60px;
            background-image: url(@/assets/header/logo.png);
            background-size: 100%;
            background-position: 0 2px;
            margin-top: 25px;
          }
          .cart {
            width: 100px;
            color: #000;
            float: right;
            margin-top: 30px;
            border-radius: 40px;
            border: 1px solid #c39657;
            width: 132px;
            padding: 8px 0;
            font-size: 14px;
            color: #c39657;
            cursor: pointer;
            i {
              vertical-align: text-bottom;
              font-size: 20px;
              margin-left: 25px;
              font-weight: bold;
            }
            em {
              display: inline-block;
              width: 18px;
              height: 18px;
              line-height: 18px;
              text-align: center;
              font-style: normal;
              background-color: #c32632;
              margin-left: 2px;
              border-radius: 50%;
              font-size: 12px;
              position: absolute;
              color: #fff;
            }
          }
          .search {
            position: absolute;
            width: 532px;
            height: 38px;
            top: 30px;
            right: 180px;
            border-radius: 40px;
            border: 1px solid #c39657;
            .search-right {
              width: 90px;
              height: 100%;
              background-color: #c39657;
              float: right;
              border-top-right-radius: 40px;
              border-bottom-right-radius: 40px;
              text-align: center;
              line-height: 36px;
              font-size: 16px;
              cursor: pointer;
              color: #fff;
              &:hover {
                opacity: 0.8;
              }
            }
            input {
              width: 440px;
              border: none;
              outline: none;
              height: 100%;
              border-radius: 40px;
              padding-left: 40px;
              box-sizing: border-box;
              font-size: 14px;
            }
            i {
              position: absolute;
              color: #d0d2d2;
              top: 11.5px;
              left: 15px;
            }
          }
        }
        .tab-wrap {
          width: 100%;
          height: 38px;
          display: flex;
          justify-content: space-between;

          li {
            float: left;
            color: #000;
            height: 100%;
            line-height: 38px;
            font-size: 14px;
            font-weight: bold;
            box-sizing: border-box;
            &:hover {
              border-bottom: 3px solid #bb9658;
              color: #bb9658;
              cursor: pointer;
            }
          }
        }
      }
      .subcate {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        justify-content: center;
        border: 1px solid #e5e5e5;
        border-top: none;
        padding: 10px;
        background-color: #fff;
        dl {
          color: #000;
          margin: 0 10px;
          width: 130px;
          dt {
            padding: 5px 0;
            border-bottom: 1px solid #999;
            font-size: 16px;
            font-weight: bold;
            padding-bottom: 10px;
          }
          dd {
            padding: 5px;
            font-size: 14px;
            cursor: pointer;
          }
          img {
            display: inline-block;
            width: 55px;
            height: 55px;
            vertical-align: middle;
          }
          span {
            display: inline-block;
            width: 60px;
            height: 65px;
          }
        }
      }
    }
  }
</style>
